<template>
  <div class="m-box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目台账" name="project">
        <ul class="option">
          <li>
            <label for="">项目名称：</label>
            <el-input
              placeholder="请输入"
              v-model="project_name"
              @keydown.enter.native="searchByOption"
              clearable
            >
            </el-input>
          </li>
          <li>
            <label for="">级别：</label>
            <el-select v-model="project_level" clearable placeholder="请选择">
              <el-option
                v-for="item in options_level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </li>
          <li>
            <label for="">项目阶段：</label>
            <el-select v-model="project_type" clearable placeholder="请选择">
              <el-option
                v-for="item in options_stage2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </li>
          <li>
            <label for="">太忻经济区：</label>
            <el-select v-model="is_taixin" clearable placeholder="请选择">
              <el-option
                v-for="item in options_tx"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </li>
          <li class="btn-box-flex">
            <el-button @click="searchByOption">搜索</el-button>
            <el-button @click="clearOption">清空</el-button>
          </li>
        </ul>
        <div class="size clearfix">
          <div class="add" @click="showImportFunc">
            信息导入
          </div>

          <div class="add" @click="showTemplateFunc">
            模板下载
          </div>
          <div class="add" @click="showExportFunc">
            批量导出
          </div>
        </div>
        <el-table
          :data="listInfo"
          ref="multipleTable"
          tooltip-effect="light"
          border
          stripe
          v-loading="isLoading"
          row-key="id"
          style="width: 100%;"
          :header-cell-style="{
            textAlign: 'center',
          }"
          :cell-style="{
            textAlign: 'center',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            ref="table"
            :reserve-selection="true"
            width="48"
            align="center"
            fixed
          >
          </el-table-column>

          <el-table-column label="序号" width="60" fixed>
            <template slot-scope="scope">
              <div>
                {{ (page - 1) * per_page + scope.row.index }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            :show-overflow-tooltip="true"
            label="项目名称"
            fixed
            width="240"
          >
            <template slot-scope="scope">
              <div @click="goDetails(scope.row.id)" style="cursor:pointer">
                {{ scope.row.project_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="项目阶段"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                {{ options_stage[scope.row.project_type - 1].label }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="project_level"
            label="级别"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="is_taixin"
            label="太忻经济区"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="work_target"
            label="工作目标"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="time_limit"
            label="完成时限"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="class_project_manager"
            label="项目经理"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.class_project_manager == null ||
                  scope.row.class_project_manager == "" ||
                  scope.row.class_project_manager == 0 ||
                  scope.row.class_project_manager == "none"
                    ? ""
                    : scope.row.class_project_manager
                        .split("/")
                        [
                          scope.row.class_project_manager.split("/").length - 1
                        ].split("-")[0]
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="project_unit"
            label="项目单位"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="project_executor"
            label="项目执行人"
            width="130"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="related_district"
            label="涉及项目（部门）"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="project_source"
            label="项目来源"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="construction_type"
            label="建设类型"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="file_unit"
            label="责任单位"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="file_people"
            label="主要负责人"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="file_time"
            label="填报时间"
            width="100"
          >
          </el-table-column>

          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <span class="tab-btn" @click="goDetails(scope.row.id)">
                查看项目
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="per_page"
          layout=" prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="数据导入"
      :visible.sync="showImport"
      @close="closeUpload"
      :show-close="false"
    >
      <div class="upload">
        <span class="s-title">附件上传：</span>
        <el-upload
          class="upload-demo files "
          ref="upload"
          action=""
          :limit="1"
          accept=".xlsx"
          :before-upload="beforeUpload"
          :http-request="uploadFile"
          :on-remove="handleRemove"
          :auto-upload="false"
          :file-list="fileList"
          :show-file-list="false"
          :on-change="changeFile"
        >
          <el-button size="small" type="primary">
            <img src="~@img/project/icon-add.png" alt="" />点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">
            （上传文件的类型 xlsx）
          </div>
        </el-upload>
      </div>
      <div v-for="item of changeFileList" :key="item.name" class="file-list">
        <img
          v-if="
            item.name.split('.')[item.name.split('.').length - 1] == 'xls' ||
              item.name.split('.')[item.name.split('.').length - 1] == 'xlsx'
          "
          src="~@img/upload/icon-excel.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'pdf'"
          src="~@img/upload/icon-pdf.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'docx'"
          src="~@img/upload/icon-word.png"
          alt=""
        />

        <img src="" alt="" />
        <span class="name">{{ item.name }}</span>
        <span @click="lookFile(item)" class="img111">
          <img src="~@img/upload/icon-eye.png" alt="" />
          <span class="s">预览</span>
        </span>
        <span @click="delFile(item.uid)" class="img222">
          <img src="~@img/upload/icon-delete.png" alt="" />
          <span class="d">删除</span>
        </span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpload">
          取 消
        </el-button>
        <el-button type="primary" @click="submitUpload">
          提 交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding"
      title="模板下载"
      :visible.sync="showTemplate"
    >
      <div>
        <span class="tips">提示信息：是否下载该模板？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTemplate = false">
          取 消
        </el-button>
        <el-button type="primary" @click="DownloadTemplate">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog class="not-padding" title="导出提示" :visible.sync="showExport">
      <div>
        <span class="tips">提示信息：是否导出所选信息？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExport = false">
          取 消
        </el-button>
        <el-button type="primary" @click="BatchExport">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">
        关 闭
      </div>
      <iframe v-if="FileType == 'pdf'" :src="fileSrc" frameborder="0"></iframe>
      <div v-if="FileType == 'word'" ref="word" class="word"></div>
      <div v-if="FileType == 'xlsx'" class="xlsx">
        <div class="title">文件预览 --- {{ filename }} --- Sheet1</div>
        <div class="table-box table-view" v-html="excelData">
          <!-- <el-table :data="excelData">
            <el-table-column
              v-for="(value, key, index) in excelData[1]"
              :key="index"
              :prop="key"
              :label="key"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import XLSX from "@/utils/xlsx.full.min.js";
import {
  UploadProjectData,
  downTemplate,
  BatchExportProject2,
  SearchProject,
} from "@api/project/book";
export default {
  data() {
    return {
      // 预览文件内容-start
      excelData: "加载中...",
      openFile: false,
      fileSrc: "",
      FileType: "",
      filename: "",
      changeFileList: [],
      // 预览文件内容-end
      permission: [],

      activeName: "project",
      // 筛选项
      project_name: "",
      project_level: "",
      is_taixin: "",
      project_type: "",
      searchOption: {
        project_name: "",
        project_level: "",
        is_taixin: "",
        project_type: "",
      },
      options_level: [
        {
          label: "重点项目",
          value: "重点项目",
        },
        {
          label: "一般项目",
          value: "一般项目",
        },
        {
          label: "待定",
          value: "待定",
        },
      ],
      options_stage: [
        {
          label: "招引项目",
          value: 1,
        },
        {
          label: "洽谈项目",

          value: 2,
        },
        {
          label: "签约项目",
          value: 3,
        },
        {
          label: "开工项目",
          value: 4,
        },
        {
          label: "投产项目",
          value: 5,
        },
        {
          label: "终止项目",
          value: 6,
        },
        {
          label: "完结项目",
          value: 7,
        },
        {
          label: "暂缓项目",
          value: 8,
        },
      ],
      options_stage2: [
        {
          label: "招引项目",
          value: 1,
        },
        {
          label: "洽谈项目",

          value: 2,
        },
        {
          label: "签约项目",
          value: 3,
        },
        {
          label: "开工项目",
          value: 4,
        },
        {
          label: "投产项目",
          value: 5,
        },
        {
          label: "完结项目",
          value: 7,
        },
        {
          label: "暂缓项目",
          value: 8,
        },
        {
          label: "终止项目",
          value: 6,
        },
      ],
      options_tx: [
        {
          label: "是",
          value: "是",
        },
        {
          label: "否",
          value: "否",
        },
      ],
      listInfo: [],
      // 分页
      page: 1,
      per_page: 10,
      total: 100,
      // 列表
      listInfo: [],
      isLoading: false,
      showImport: false,
      showTemplate: false,
      showExport: false,
      fileList: [],
    };
  },
  mounted() {
    this.permission = localStorage.getItem("funcList").split(",");

    this.project_type = this.$route.query.project_type || "";
    this.searchOption.project_type = this.$route.query.project_type || "";

    this.token = localStorage.getItem("login");
    this.getList();
  },
  methods: {
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
      this.excelData = "加载中...";
    },
    showImportFunc() {
      if (this.permission.includes("19") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      } else {
        this.showImport = true;
      }
    },
    showTemplateFunc() {
      if (this.permission.includes("20") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      } else {
        this.showTemplate = true;
      }
    },
    showExportFunc() {
      if (this.permission.includes("21") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      } else {
        this.showExport = true;
      }
    },
    // 获取列表
    async getList() {
      this.isLoading = true;
      let res = await SearchProject({
        taizhang_type: 2,
        project_name: this.searchOption.project_name,
        is_taixin: this.searchOption.is_taixin,
        project_level: this.searchOption.project_level,
        project_type: this.searchOption.project_type,
        page: this.page,
        per_page: this.per_page,
        project_audit_status: this.searchOption.project_type == 8 ? 0 : "",
      });
      console.log(res);
      if (res.code && res.code != 0) {
        this.listInfo = [];
        this.total = 0;
      } else {
        res.data.map((item, index) => {
          item.index = index + 1;
        });
        this.listInfo = res.data;
        this.total = res.size;
      }
      this.isLoading = false;
    },
    // 搜索
    searchByOption() {
      this.searchOption = {
        project_name: this.project_name,
        project_level: this.project_level,
        is_taixin: this.is_taixin,
        project_type: this.project_type,
      };
      this.page = 1;
      this.getList();
    },
    // 清空
    clearOption() {
      this.project_name = "";
      this.project_level = "";
      this.is_taixin = "";
      this.project_type = "";
      this.searchOption = {
        project_name: "",
        project_level: "",
        is_taixin: "",
        project_type: "",
      };
      this.page = 1;
      this.getList();
    },
    // 切换分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    goDetails(id) {
      if (this.permission.includes("22") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      localStorage.setItem("activeCard", "info");
      this.$router.push({
        name: "project",
        params: { id, activeMenu: "projectgl", type: "project" },
      });
    },
    // 表格选择项
    handleSelectionChange(selection) {
      this.selectListId = selection.map((item) => {
        return item.id;
      });
    },
    // 导出所选项
    async BatchExport() {
      if (this.selectListId.length == 0) {
        this.showExport = false;
        this.$message.warning("请选择要导出的信息！");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });

      let arr = this.selectListId;
      let res = await BatchExportProject2({ select_id_list: arr });
      if (res.code == 0) {
        this.showExport = false;
        this.selectListId = [];
        this.$refs.multipleTable.clearSelection();
        window.open(res.url);
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
      loading.close();
    },
    // 下载模板
    async DownloadTemplate() {
      let res = await downTemplate({ template_type: 2 });
      window.open(res);
      this.showTemplate = false;
    },
    //关闭弹框
    closeUpload() {
      this.showImport = false;
      this.fileList = [];
      this.changeFileList = [];
    },
    // 上传前验证
    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "xlsx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传xlsx文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel;
    },
    // 移出文件
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    changeFile(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    lookFile(item) {
      console.log(item);
      if (item.name.includes("pdf")) {
        this.FileType = "pdf";
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else if (item.name.includes("docx")) {
        this.FileType = "pdf";
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      } else {
        this.FileType = "xlsx";
        this.readWorkbookFromFile(item);
        this.openFile = true;
      }
    },
    delFile(uid) {
      this.changeFileList.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList.splice(index, 1);
          console.log(a);
        }
      });
    },
    readWorkbookFromFile(data) {
      this.filename = data.name;
      let reader = new FileReader();
      reader.readAsArrayBuffer(data.raw);
      let that = this;
      reader.onload = function(readRes) {
        var workbook = XLSX.read(readRes.target.result, { type: "array" });
        var sheetNames = workbook.SheetNames;
        var worksheet = workbook.Sheets[sheetNames[0]];
        // that.excelData = XLSX.utils.sheet_to_json(worksheet);
        that.excelData = XLSX.utils
          .sheet_to_html(worksheet)
          .replace(
            '<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body>',
            ""
          )
          .replace("</body></html>", "");
        // console.log(XLSX.utils.sheet_to_json(worksheet));
        // console.log(XLSX.utils.sheet_to_row_object_array(worksheet));
      };
    },
    // 上传到服务器
    async uploadFile(params) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      let fd = new FormData();
      fd.append("token", this.token);
      fd.append("taizhang_type", 2);
      fd.append("file", params.file);
      try {
        let res = await UploadProjectData(fd);
        if (res.code == 0) {
          loading.close();
          this.$message.success(res.msg);
          this.showImport = false;
          this.fileList = [];
          this.changeFileList = [];
          this.page = 1;
          this.getList();
        } else {
          loading.close();
          this.fileList = [];
          this.changeFileList = [];
          this.$message.error(res.msg);
        }
      } catch {
        this.fileList = [];
        this.changeFileList = [];
        loading.close();
      }
    },
    // 发送上传请求
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>
<style lang="less" scoped>
.m-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

// 选项卡样式修改
/deep/.el-tabs__item {
  padding: 0 35px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #446db3;
}

/deep/.el-tabs__active-bar {
  height: 4px;
  background: #446db3;
}
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__header {
  margin: 0;
  background: #fff;
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    box-sizing: border-box;
    height: calc(100% - 60px);
    padding: 30px 30px 20px;
    overflow: unset;
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}

.option {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  li {
    flex: 0 0 18%;

    display: flex;
    justify-content: start;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;
    label {
      width: 120px;
      line-height: 32px;
      margin-right: 10px;
      text-align: right;
    }
    &:last-of-type {
      justify-content: start;
    }
  }
}

// 修改输入框
/deep/ .option .el-input {
  width: 88%;
  height: 32px;
  line-height: 32px;
}

/deep/ .option .el-input__inner {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
}
// 修改选择框
/deep/ .option .el-input__icon {
  line-height: 32px;
}
//
/deep/ .option .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .option .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .option .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
// 修改按钮
/deep/ .option .el-button {
  padding: 0;
  width: 100px;
  height: 32px;
  line-height: 8px;
  text-align: center;
  border-radius: 4px;
  &:first-of-type {
    background: #446db3;
    color: #fff;
  }
  &:last-of-type {
    color: #446db3;
    border-color: #446db3;
  }
}

.size {
  margin: 10px 0 0;
  .add {
    float: left;
    margin: 0 30px 20px 0;
    width: 120px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #f89718;
    border-radius: 4px;
    cursor: pointer;
  }
  .del {
    float: right;
    margin: 0;
    background: #f15847;
  }
  .examine {
    float: right;
    margin: 0 0 0 30px;
    background: #f15847;
  }
}

//// 表格样式修改
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}

/deep/.el-table__header .has-gutter tr th {
  height: 44px;
  background: #446db3 !important;
  color: #fff;
  border-right: 0;
}
/deep/.el-table tr {
  height: 44px;
  font-size: 14px;
  background-color: #fff;
}
/deep/.el-table .el-table__cell {
  height: 44px;
  padding: 0;

  cursor: pointer;
  .cell {
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/deep/ .el-table--border th {
  border-right: none;
  background: #446db3 !important;
  color: #fff;
}
// 表格分页样式修改
/deep/.el-table {
  width: 1530px !important;
}
.el-pagination {
  position: absolute;
  right: 30px;
  bottom: 30px;
  text-align: right;
}
/deep/ .el-pager li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  margin: 0 8px;
}

/deep/ .el-pager li.active {
  color: #fff;
  background: #446db3;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
  border-radius: 6px;
}

/deep/ .el-pagination .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-next:hover
  .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
  background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
}
/deep/ .el-pagination .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-prev:hover
  .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
  background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
}
/deep/.pagination .el-select .el-input.is-focus .el-input__inner {
  height: 40px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-input__inner {
  height: 40px;
  color: #666;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-pagination__sizes .el-input .el-input__inner:hover {
  height: 40px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/ .el-pagination__jump {
  height: 40px;
  line-height: 40px;
}
/deep/.pagination .el-pagination__jump .el-input__inner {
  color: #ccc;
}
/deep/.pagination .el-pagination__jump .el-input__inner.active {
  color: #666;
}
/deep/.el-pagination__jump .el-input__inner:focus {
  color: #666;
}

// 多选框

/deep/ .el-checkbox__input {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  line-height: 10px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

/deep/ .el-checkbox__input .el-checkbox__inner {
  width: 8px;
  height: 8px;
  border: 0;
}

/deep/ .el-checkbox__input.is-checked,
.el-checkbox__input.is-indeterminate {
  border-color: #446db3;
}

/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: transparent;
  border-color: transparent;
}
/deep/ .el-checkbox__inner::after,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  content: none;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #446db3;
  border-color: #446db3;
}
/deep/ .el-pagination .btn-prev,
/deep/ .el-pagination .btn-next {
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/ .tab-btn {
  display: inline-block;
  width: 80px;
  height: 24px;
  line-height: 24px;
  background: #f89718;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
/deep/ .el-dialog--center .el-dialog__body {
  padding: 10px 0;
}

/deep/ .el-dialog {
  padding: 0 88px;
  top: 50%;
  margin-top: -150px !important;
  height: 300px;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
  .el-dialog__header {
    padding: 0;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px dashed #dddddd;

    .el-dialog__title {
      display: block;
      line-height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -258px;
    padding: 0;
    .el-button {
      padding: 0;
      width: 248px;
      height: 48px;
      border: 2px solid #446db3;
      border-radius: 10px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
    .el-button--primary {
      margin-left: 20px;
      color: #fff;
      background: #446db3;
      box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    }
  }
  // .dialog-footer {
  //   width: 248px;
  //   margin-left: 114px;
  // }
  .d-content {
    width: 420px;
    margin: 0 auto;
    .label-name {
      margin: 10px 0 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 34px;
    }
    .label-input {
      padding-left: 12px;
      width: 420px;
      height: 32px;
      line-height: 32px;
      background: #f7f7f7;
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  }
}
/deep/ .upload {
  display: flex;
  .s-title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
/deep/ .not-padding .el-dialog__body {
  padding: 48px 0;
  .tips {
    width: 100%;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
.files {
  /deep/.el-upload__tip {
    margin-left: 16px;
    display: inline-block;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .upload-demo {
    min-height: 140px;
  }
  /deep/ .el-button {
    margin-top: 20px;
  }
  /deep/ .el-button--small {
    margin: 0;
    padding: 0;
    width: 133px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    vertical-align: middle;
    img {
      margin-right: 5px;
      position: relative;
      left: 0;
      top: 1px;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 30px 0px 30px 200px;
}
/deep/ .el-upload-list__item-name {
  text-align: left;
}
.file-list {
  height: 60px;
  line-height: 60px;
  cursor: default;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  .xlsx,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
  .xlsx {
    .title {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
    }
    /deep/ .el-table {
      width: 100% !important;
    }
  }
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-table {
    width: 1290px !important;
    height: 422px !important;
  }
  /deep/ .option .el-input {
    width: 100px;
  }
  .option li label {
    width: 100px;
  }
  .option li {
    &:nth-of-type(2) {
      flex: 0 0 16%;
      label {
        width: 60px;
      }
    }
    &:nth-of-type(4) {
      flex: 0 0 24%;
    }
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-table {
    width: 1140px !important;
    height: 360px !important;
  }
  .option li {
    flex: 0 0 20%;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-table {
    width: 1050px !important;
  }
  /deep/ .option .el-button {
    width: 80px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table {
    width: 1046px !important;
    height: 512px !important;
  }
  /deep/ .option .el-button {
    width: 80px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-table {
    width: 850px !important;
    height: 400px !important;
  }
  /deep/ .option .el-button {
    font-size: 12px;
    width: 60px;
  }
  .option li label {
    width: 74px;
    font-size: 12px;
    margin-right: 0;
  }
  /deep/ .option .el-input {
    width: 90px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-table {
    width: 694px !important;
    height: 360px !important;
  }
  /deep/ .option .el-input {
    width: 86px;
    font-size: 12px;
  }

  .option li {
    label {
      width: 60px;
    }
    &:nth-of-type(2) {
      flex: 0 0 16%;
      label {
        width: 40px;
      }
    }
    &:nth-of-type(4) {
      flex: 0 0 24%;
      label {
        width: 72px;
      }
    }
  }
  /deep/ .option .el-button {
    font-size: 12px;
    width: 50px;
  }
}
</style>
<style>
.table-view table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.table-view table tr:first-of-type {
  background: #446db3;
  color: #fff;
}
.table-view table td {
  min-width: 150px;
  min-height: 30px;
  border: 1px solid #ccc;
}
</style>
